<template>
  <div :class="$style.home">
    <div :class="$style.dialogFull" v-if="closeDialog === 1">
      <div :class="$style.dialog">
        <div :class="$style.closeImg" @click="closeDialogHandle"></div>
        <img src="./../assets/dialog.png" />
      </div>
    </div>

    <Head ref="index" @scrollTo="scrollToElement" />
    <Mpage :class="$style.hotbg">
      <template v-slot:title>
        <div :class="$style.mtitle">
          <img src="./../assets/remenkecheng.png" />
        </div>
      </template>
      <template>
        <HotCourses />
      </template>
    </Mpage>
    <div ref="about"></div>
    <Mpage :class="$style.companyProfile" style="padding-bottom:50px;">
      <template v-slot:title>
        <div :class="$style.mtitle">
          <img src="./../assets/gongsijianjie.png" />
        </div>
      </template>
      <template>
        <div :class="$style.companyInfo">
          <div :class="$style.companyText">
            国际高端连锁教育机构，目前已有十多年的发展历史。有全韩籍教授级院长亲自授课，中国教育部授权正规办学技能培训机构，30多位韩国院长师资，在海外拥有100多个校区，年培训学员数万余人。30多位韩国院长师资，在海外拥有100多个校区，年培训学员数万余人。
          </div>
          <div :class="$style.companyImage">
            <img :src="publicPath + 'gongsi.png'" />
          </div>
        </div>
      </template>
    </Mpage>
    <div ref="course"></div>
    <Mpage :class="$style.course">
      <template v-slot:title>
        <div :class="$style.mtitle">
          <img src="./../assets/kechengjieshao.png" />
        </div>
      </template>
      <template>
        <div :class="$style.courseIntroduction">
          <div :class="$style.liaojieggengduo">
            <img src="./../assets/liaojiegengduo.png" />
          </div>

          <div :class="$style.img_fu">
            <img
              src="./../assets/kechengjieshao1.png"
              :class="$style.kechengjieshao"
            />
          </div>
          <div :class="$style.courseText">
            <p :class="$style.title">VOGUE 明星粉墨眉</p>
            <p :class="$style.title_text">
              该技法是让专家通过精湛的手部技法来进行半永久化妆术
            </p>
            <p :class="$style.title_text">而且按照眉毛的毛向和纹理进行，</p>
            <p :class="$style.title_text">
              效果完全取决于操作人的个人手法，所以也是高
            </p>
            <p :class="$style.title_text">难度的技法。</p>
          </div>
        </div>
        <div :class="$style.courseIntroduction">
          <div :class="$style.liaojieggengduo">
            <img src="./../assets/liaojiegengduo.png" />
          </div>

          <div :class="$style.img_fu">
            <img
              src="./../assets/kechengjieshao2.png"
              :class="$style.kechengjieshao"
            />
          </div>
          <div :class="$style.courseText">
            <p :class="$style.title">STARS 星空明目黑</p>
            <p :class="$style.title_text">
              可表现嘴唇的曲线、轮廓和颜色的阴影，
            </p>
            <p :class="$style.title_text">
              让薄嘴唇看起来丰满，并可将大嘴唇修改小，
            </p>
            <p :class="$style.title_text">若唇线不清楚时，还可以变清晰</p>
          </div>
        </div>
        <div :class="$style.courseIntroduction">
          <div :class="$style.liaojieggengduo">
            <img src="./../assets/liaojiegengduo.png" />
          </div>

          <div :class="$style.img_fu">
            <img
              src="./../assets/kechengjieshao3.png"
              :class="$style.kechengjieshao"
            />
          </div>
          <div :class="$style.courseText">
            <p :class="$style.title">MAGIC 红眉蓝眉改眉术</p>
            <p :class="$style.title_text">
              生长睫是最新的睫毛生长技术，
            </p>
            <p :class="$style.title_text">激活毛囊再开，</p>
            <p :class="$style.title_text">30天就可以拥有自然茂密的睫毛了哟，</p>
            <p :class="$style.title_text">只需操作一次即可。</p>
          </div>
        </div>
        <div :class="$style.courseIntroduction">
          <div :class="$style.liaojieggengduo">
            <img src="./../assets/liaojiegengduo.png" />
          </div>

          <div :class="$style.img_fu">
            <img
              src="./../assets/kechengjieshao2.png"
              :class="$style.kechengjieshao"
            />
          </div>
          <div :class="$style.courseText">
            <p :class="$style.title">GENTRY 绅士眉</p>
            <p :class="$style.title_text">
              半永久功效可媲美一般激光或换肤疗程，
            </p>
            <p :class="$style.title_text">
              使用方便、微创无痛、无需休息，
            </p>
            <p :class="$style.title_text">
              其安全性及功效都经过无数临床实验验证。
            </p>
          </div>
        </div>
        <p :class="$style.tipText" style="padding-top:20px;">课程火热报名中</p>
        <p :class="$style.tipText2">把最美的你展现出来</p>
        <p :class="$style.tipText3">8月课程（即将报满）</p>
        <div :class="$style.courseFoot">
          <p v-for="text in courseText" :key="text" :class="$style.tipText2">
            {{ text }}
          </p>
          <img :class="$style.lijibaoming" src="./../assets/lijibaoming.png" />
        </div>
        <div :class="$style.baomingtu">
          <NewRepors />
          <img src="./../assets/baomingtu.png" />
        </div>
      </template>
    </Mpage>
    <Mpage :class="$style.hotbg">
      <template v-slot:title>
        <div :class="$style.mtitle">
          <img src="./../assets/jiaoxuemoshi.png" />
        </div>
      </template>
      <template>
        <TeachingModel />
      </template>
    </Mpage>
    <div ref="works"></div>
    <Mpage :class="$style.stuntdent">
      <template v-slot:title>
        <div :class="$style.mtitle">
          <img src="./../assets/xueyuanzuopin.png" />
        </div>
      </template>
      <template>
        <StudentWorks />
      </template>
    </Mpage>
    <div ref="teacher"></div>
    <Mpage :class="$style.teacher">
      <template v-slot:title>
        <div :class="$style.mtitle">
          <img src="./../assets/shizililiang.png" />
        </div>
      </template>
      <template>
        <TeacherStrength />
      </template>
    </Mpage>
    <Ba />
    <Foot />
  </div>
</template>

<script>
import { onMounted, value } from "vue-function-api";
import Head from "./head.vue";
import Mpage from "./../components/m-page";
import Foot from "./foot";
import { scrollTo } from "./util";
import NewRepors from "./../components/newRepors";
import TeachingModel from "./../components/teachingModel";
import StudentWorks from "./../components/studentWorks";
import TeacherStrength from "./../components/teacherStrength";
import HotCourses from "./../components/hotCourses";
import Ba from "./../components/keepRecord";
const componentLoadd = () => {
  const $Loading = document.getElementById("Loading");
  if ($Loading) {
    $Loading.remove();
  }
};

export default {
  setup(props, ctx) {
    // remove loading
    onMounted(componentLoadd);
    // scroll to element
    const scrollToElement = to => {
      console.log(to);
      console.log(ctx.refs[to]);
      // console.log(ctx.refs[to].$el);
      scrollTo(ctx.refs[to]);
    };
    const courseText = [
      "7.25-29 皮肤管理课程",
      "8.03-07 皮肤管理课程",
      "8.10-14 皮肤管理课程",
      "8.17-21 半永久课程"
    ];
    const closeDialog = value(0);
    setTimeout(() => {
      document.body.style.overflow = "hidden";
      closeDialog.value = 1;
    }, 2500);
    const closeDialogHandle = () => {
      document.body.style.overflow = "auto";
      closeDialog.value = 0;
    };
    return {
      scrollToElement,
      courseText,
      publicPath: process.env.BASE_URL,
      closeDialog,
      closeDialogHandle
    };
  },
  components: {
    Head,
    Mpage,
    Foot,
    NewRepors,
    TeachingModel,
    StudentWorks,
    TeacherStrength,
    HotCourses,
    Ba
  }
};
</script>

<style lang="scss" module>
.home {
  padding-bottom: 42px;
}
@mixin courseCenter {
  width: 78%;
  margin: 0 auto;
}
.mtitle {
  width: 100px;
  margin-left: 16px;
  margin-bottom: 16px;
  img {
    width: 100%;
    height: 100%;
  }
}
.hotbg {
  background: linear-gradient(to bottom, #434039 0%, #585040 100%) !important;
  padding-bottom: 20px;
}
.companyProfile {
  height: 350px;
  padding: 10px 10px 10px 0px;
  background: url("./../assets/gongsibg.png") no-repeat 100% !important;
  background-size: cover !important;
  background-color: #585040 !important;
  position: relative;
  .companyInfo {
    height: 200px;
    display: flex;
    // align-items: flex-end;
    // justify-content: flex-end;
    flex-direction: column;
    padding-left: 10px;
    position: absolute;
    top: 75px;
    padding-left: 10px;
    .companyText {
      height: 85%;
      right: 66%;
      width: 80%;
      color: #fff;
      box-sizing: border-box;
      margin-left: 10%;
      margin-top: 30px;
      margin-bottom: 30px;
      // padding: 4px 2px 0px 2px;
      font-size: 11px;
      // background: rgb(119, 113, 101);
    }
    .companyImage {
      width: 90%;
      height: 100%;
      margin-left: 15px;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
}

.course {
  background: url("./../assets/kechengjieshaobg.png") no-repeat 100% top !important;
  background-size: cover !important;
  background-color: #585040 !important;
  padding: 10px 0px 0px 0px;
  position: relative;
  .courseIntroduction {
    width: 85%;
    height: 120px;
    margin: 0 auto;
    background: url("./../assets/jieshao.png") no-repeat 100% !important;
    background-size: 100% !important;
    display: flex;
    position: relative;
    margin-top: 30px;
  }
  .courseIntroduction:nth-child(odd) {
    transform: rotateY(180deg);
    .courseText {
      transform: rotateY(180deg);
    }
    .liaojieggengduo {
      transform: rotateY(180deg);
    }
  }
  .courseText {
    color: #fff;
    padding-top: 25px;
    .title {
      font-size: 14px;
      margin: 0;
      padding-left: 8px;
    }
    .title_text {
      font-size: 9px;
      margin: 0px;
      padding-left: 8px;
    }
  }
  .img_fu {
    height: 100%;
    display: flex;
    align-items: center;
    padding-left: 1%;
    .kechengjieshao {
      height: 92%;
      border-radius: 50%;
    }
  }
  .liaojieggengduo {
    position: absolute;
    height: 30px;
    width: 100px;
    right: 5px;
    bottom: 5px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .tipText {
    @include courseCenter;
    color: #000;
    font-size: 18px;
  }
  .tipText2 {
    @include courseCenter;
    margin-top: 5px;
    font-size: 10px;
    color: #968e83;
  }
  .courseFoot {
    width: 100%;
    height: 100px;
    box-sizing: border-box;
    padding-left: 11%;
    padding-top: 5px;
    background-color: rgb(55, 54, 51);
    .tipText2 {
      width: 78%;
      margin: 5px 0 0 0 !important;
    }
  }
  .tipText3 {
    width: 40%;
    margin-left: 11%;
    margin-top: 15px;
    margin-bottom: 0px;
    font-size: 15px;
    color: #000;
    background: url("./../assets/hot.png") no-repeat top left;
    background-size: 9px;
    background-position: top right;
  }
  .baomingtu {
    width: 160px;
    height: 160px;
    position: absolute;
    bottom: 0px;
    right: 0px;
    img {
      width: 100%;
      height: 100%;
      margin: 0px;
      padding: 0px;
    }
  }
  .lijibaoming {
    width: 45px;
    height: 20px;
    display: block;
    margin: 0 auto;
  }
}
.stuntdent {
  background-image: url("./../assets/xueyuanzuopinbg.png");
  background-size: 100%;
  background-repeat: no-repeat;
  background-color: #585040 !important;
  padding-bottom: 10px;
}

.teacher {
  background-image: url("./../assets/szllback.png");
  background-size: 100%;
  background-repeat: no-repeat;
  background-color: #585040 !important;
  padding-bottom: 10px;
}
.dialogFull {
  width: 100%;
  height: 100%;
  position: relative;
  background: rgba(0, 0, 0, 0.5);
  overflow: hidden;
  position: fixed;
  z-index: 999;
  display: flex;
  justify-content: center;
  align-items: center;
}
.dialog {
  width: 60%;
  height: 150px;
  position: relative;
  margin: auto;
  z-index: 999;
  .closeImg {
    width: 20%;
    height: 25%;
    position: absolute;
    right: 0;
    top: 20px;
    z-index: 9999;
  }
  img {
    width: 100%;
    height: 100%;
  }
}
</style>
